import React from 'react';
import { useVirtualList } from 'ahooks';
import PageLoading from '@/components/PageLoading';
import PageEmptyData from '@/components/PageEmptyData';
import ScoreRow from './ScoreRow';
import useScorePageData from '../utils/useScorePageData';
import { viewSizeFormat } from '@/common/format';

import styles from '../style/ScoreContainer.scss';

const ScoreContainer = ({ sportId, value, enumValue }) => {
  const itemHeight = viewSizeFormat(116 * 2);
  const { todayLabel, list, loading, isBasketball, isFootball, defaultMatchImage } = useScorePageData({ sportId, value });
  const { list: scrollList, containerProps, wrapperProps } = useVirtualList(list, {
    overscan: 40,
    itemHeight,
  });

  if (loading) {
    return (
      <PageLoading />
    );
  }
  if (!list.length) {
    return (
      <PageEmptyData />
    );
  }
  return (
    <div className={styles.container}>
      <div className={styles.title}>{todayLabel}</div>
      <div {...containerProps} className={styles.scorll_container}>
        <div {...wrapperProps}>
          {scrollList.map(({ data: row, index }) => (
            <ScoreRow
              key={index}
              value={enumValue}
              data={row}
              isBasketball={isBasketball}
              isFootball={isFootball}
              defaultMatchImage={defaultMatchImage}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default ScoreContainer;
